Better WordPress Performance by Controlling Scripts

Ever wondered how to control script and style loading to achieve better WordPress performance? In this tutorial we will learn how WordPress loads the scripts and how can we control which script or style will be loaded. We will also see how to block loading of scripts from certain plugins.

Many plugins load their own styles and scripts which can lead to a bloated WordPress site with assets that are not needed on a page. For example, let’s assume that we use WooCommerce or SiteOrigin’s Page Builder. In our example, we do not use any of WooCommerce widgets or the page builder on our home page. We should be able to remove those scripts or styles since those HTTP requests can be saved and rendering of our entire home page improved.

Enqueueing Scripts

When coding your own plugin or theme, you should always enqueue your scripts and styles and not hard code them into your templates. This enables us, other developers, to control the loading of the scripts and styles and even disable their loading on pages where we do not need them.

You can do that just by using simple code snippets like this one:

Can you see what is consistent with both theme and plugin enqueueing? We are using the same action hook wp_enqueue_scripts.

By enqueueing scripts into footer we can improve the WordPress performance by a little. That is great, but when we do not need that script, it only hurts our performance.

Inspecting Action wp_enqueue_scripts

All actions and functions that are hooked into those actions are saved into a global variable $wp_filters. Since this global variable holds many other actions and filters, we will only need the functions registered for action wp_enqueue_scripts.

To inspect this action, we can use this code snippet just for developing and inspecting purposes. Do not use it in production because it will stop your site.

You can add that to your theme’s functions.php file or into a plugin if you want. As this is only for inspecting purposes and to see which scripts are hooked, this code snippet should be removed before going live.

My active theme is Twenty Sixteen and plugins that are installed and activated are WooCommerce and SiteOrigin’s Page Builder. If I load my site’s front, I will get these:

This is an array that shows all the functions added to the action wp_enqueue_scripts. Those functions are the ones that will enqueue scripts and styles.

We can remove those actions as we want to be sure that any script or style from that function will not be enqueued.

Remove Hooked Functions to improve WordPress Performance

To know which function to remove we would need to know the name of that function. To remove a hooked function we can use the function remove_action. For this to work, we need to pass the name of the action, the name of the function and also the priority.

If we know all of them, then it is an easy task to do that. To remove the SiteOrigin styles we can just call the remove_action like this:

We hooked our function on the action init with the priority of 99. By using such high priority, we can be sure that our hooked function will be one of the last ones to execute.

Ok, now we are aware of the hooked functions and we also know how to remove those functions that will add styles and scripts. What about blocking specific scripts and styles?

Find out All Queued Scripts and Style for Rendering

To block specific scripts and styles, we need to know each of them. For this we can’t do the same as before with the hooked functions. This must be done after all custom scripts and styles were already registered and queued for rendering.

The actions where all those assets are enqueued is the wp_enqueue_scripts or for the admin area the admin_enqueue_scripts. In those actions we can also use conditional functions such as is_home() or is_page().

When registering and enqueueing our styles or scripts, we add a handle for each of them. We only need to know about the ones that are also queued because only the queued assets will be rendered. By removing unnecessary scripts or styles we will achieve a better WordPress performance.

Queued Script Handles

Script handles that are in the queue for rendering can be found like this:

This will print our script handles that are hooked before rendering. Since we are using the priority of 99, we are sure that this is the last function that will be executed. Due to that, we will see every single script handle that is queued.

Don’t use it in the production since it will print your handles, break the layout and even stop the site from working because the die(); function stops everything else after the execution.

Here is the list of all the script handles that are queued for my site:

Queued Style Handles

We can found out about the queued style handles in a similar way as we did for scripts:

This will print our style handles that are hooked before rendering.

Don’t use it in the production since it will print your handles, break the layout and even stop the site from working because the die(); function stops everything else after the execution.

Here is the list of the queued script handles that I have for my site:

We would have also SiteOrigin’s scripts and styles if we did not remove the appropriate hooked functions previously.

Removing Scripts and Styles from Queue for Better WordPress Performance

Now we know that to have all those styles and scripts enqueued, we have to hook a function with the highest priority number to get executed last. In that function we can then securely perform various actions on those handles.

Let’s remove scripts and styles for the WooCommerce if we are on the front page:

We have first checked if we are on the front page. Once we are sure that we are only on the front page we are dequeueing scripts and styles that were queued. Now we only have these script and style handles that will be added:

We have achieved a better WordPress performance by removing unnecessary scripts and styles thus saving about 6 HTTP requests.

How to Smart Enqueue your Plugin’s style or script in the Admin Area

When you write your own plugin, probably there will be some scripts or styles that will have to be included in the admin area for everything to work. When using the action admin_enqueue_scripts you can also get the parameter that is passed to that action. The parameter is $hook and it holds the page on which we are.

By using that hook and some $_GET parameters you can be sure to enqueue your plugin’s scripts and styles on the right page. For the example, we will assume that we have a post_type books. For every book, let’s say that we can enter a datepicker for publishing date and some custom JavaScript that will be held in a file books.js.

We will need to enqueue the datepicker script that comes included into WordPress and also a simple script from our plugin. To be sure that we are on the right page we will look info the parameter $hook. We will need to be on the edit post page or on the new post page.

Here is the code snippet that will do that:

 

 

Conclusion

By conditionally loading scripts and styles from our themes and plugins we can make a WordPress site much better. By controlling how scripts and styles from other plugins are loaded, you can really improve the WordPress performance.

Have you ever done anything similar to this to improve your WordPress performance? Do you have any questions? Add it as a comment below:)

 

Become a Sponsor